<template>
    <view class="root">
        <image class="pic-invite" src="/static/images/pic-invite.png" />
        <view class="main">
            <label class="invite-friend">
                <image src="/static/images/pic-inviteFriend.png" />
                <text>邀请好友</text>
            </label>
            <text class="invite-tips">
                {{ inviteData.rule }}
            </text>

            <label class="invite-reward">
                <text>
                    你已成功邀请{{ inviteData.numberOfPeople }}人，奖励你:
                </text>
                <text class="money">{{ inviteData.reward }}</text>
                <text>元</text>
            </label>
            <text class="invite-explain">
                邀请获得奖励将以优惠券形式抵扣车费
            </text>

            <view class="recruit-box">
                <label class="recruit">
                    <text>招募驾驶员</text>
                    <image src="/static/images/pic-recruit.png" />
                </label>
                <text class="recruit-explain">
                    招募一个驾驶员，可获得该驾驶员终身业绩的 百分之一个返点
                </text>
            </view>
        </view>

        <button
            hover-class="tap-hover"
            open-type="share"
            :plain="true"
            class="btn-invite"
        >
            <image src="/static/images/btn-invite.png" />
            <text>立即邀请</text>
        </button>
    </view>
</template>

<script lang="ts">
    import { Storage } from "@/libs/utils";
    import Vue from "vue";
    import Component from "vue-class-component";
    import { InviteData } from "../common/api";

    @Component
    export default class Invite extends Vue {
        inviteData: InviteData = {
            numberOfPeople: 0,
            reward: 0,
        };

        onLoad(): void {
            this.request
                .get("/api/tuijian")
                .then(({ data }) => (this.inviteData = data));
        }

        onShareAppMessage() {
            return {
                title: "邀请好友领大奖",
                path: `/pages/home?user_id=${Storage.get("userInfo").user_id}`,
            };
        }
    }
</script>

<style lang="scss" scoped>
    .root {
        .pic-invite {
            width: 100%;
            height: 710rpx;
        }
        .main {
            margin: -140rpx 30rpx 0;
            background-color: #fff;
            border-radius: 33rpx;
            z-index: 9;
            .invite-friend {
                margin: -30rpx auto 0;
                width: 405rpx;
                height: 65rpx;
                position: relative;
                image {
                    width: 100%;
                    height: 100%;
                }
                text {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    text-align: center;
                    line-height: 65rpx;
                    color: #fff;
                    font-size: 32rpx;
                }
            }
            .invite-tips {
                color: #666;
                font-size: 30rpx;
                line-height: 120rpx;
                text-align: center;
            }
            .invite-reward {
                margin: 0 90rpx;
                padding: 30rpx 40rpx;
                justify-content: center;
                background-color: #e5eefe;
                border-radius: 10rpx;
                font-size: 30rpx;
            }
            .invite-explain {
                color: #999;
                font-size: 24rpx;
                margin-top: 15rpx;
                text-align: center;
            }

            .recruit-box {
                background-color: #e5eefe;
                margin: 90rpx 20rpx 0;
                justify-content: center;
                border-radius: 10rpx;
                .recruit {
                    position: relative;
                    margin: -25rpx auto 0;
                    width: 284rpx;
                    height: 46rpx;
                    image {
                        width: 100%;
                        height: 100%;
                    }
                    text {
                        z-index: 9;
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        text-align: center;
                        line-height: 46rpx;
                        color: #fff;
                        font-size: 32rpx;
                    }
                }
                .recruit-explain {
                    font-size: 26rpx;
                    padding: 50rpx;
                    text-align: center;
                    line-height: 2;
                }
            }
        }
        .btn-invite {
            position: relative;
            margin: 80rpx 50rpx;
            height: 110rpx;
            padding: 0;
            border: none;
            image {
                width: 100%;
                height: 100%;
            }
            text {
                position: absolute;
                color: #fff;
                font-size: 42rpx;
                width: 100%;
                height: 100%;
                text-align: center;
                line-height: 110rpx;
            }
        }
    }
</style>